<template>
	<div class="u-page">
		<div class="u-pb-10">
			<u-swiper :list="ServiceAds" height="160" border-radius="0"></u-swiper>
		</div>
		<u-subsection :list="list" fontSize="16" :current="current" @change="sectionChange"></u-subsection>
		<div class="u-pt-10 u-pb-10" v-if="current == 0">
			<a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
				@click="toGoodsDetails(item)">
				<div class="aui-list-theme-img">
					<u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
				</div>
				<div class="aui-list-theme-message">
					<div class="u-flex line-ellipsis">
						<h3 class="aui-list-theme-title">{{ item.goodsName }}</h3>
					</div>
					<div class="u-flex pt-3">
					<u-image width="25rpx" height="25rpx"
							src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
					<div class="goods-label-text">玫丽全网最低价</div>
					</div>
					<div class="u-flex u-pb-5 va-bottom" style="justify-content: space-between;">
						<span class="amount-money">
							<span class="u-fz-18 u-font-bold">&yen;{{ item.discountPrice }}</span>
						</span>
						<span class="sales-volume">
							本期售{{ item.soldNum ? item.soldNum : 0 }}
						</span>
					</div>
				</div>
			</a>
		</div>
		<div class="u-pt-10 u-pb-10" v-if="current == 1">
			<ul>
				<li v-for="(item, index) in JobList" :key="index">
					<div :class="index==0?'services-li':'u-mt-10 services-li'" @click="toJobDetails(item)">
						<!-- 标题 -->
						<div class="u-title u-flex u-row-between u-col-center">
							<div class="u-flex u-col-center u-flex-1">
								<div class="hot-tag" v-if="item.jobTop">热</div>
								<div class="new-tag" v-if="!item.jobTop && isNewOS(item)">新</div>
								<div class="os-job-name">
									{{item.jobName?item.jobName:''}}
								</div>
							</div>
							<div class="os-salary" v-if="item.salary">￥{{item.salary}}</div>
						</div>
						<div class="u-pt-5">
							{{item.company?item.company:''}}
						</div>
						<!-- 标签 -->
						<div class="u-scroll-x u-mr-5 u-pt-5" style="display: flex;justify-content: flex-start;">
							<div class="u-mr-5">
								<u-tag :text="item.experiece" type="info" mode="dark" size="mini"
									bgColor="#fff3f3" color="#eb5468" borderColor="#fff3f3" v-if="item.experiece"></u-tag>
							</div>
							<div class="u-mr-5">
								<u-tag :text="item.degree" type="info" borderColor="#fff3f3" mode="dark" size="mini"
									bgColor="#fff3f3" color="#eb5468" v-if="item.degree"></u-tag>
							</div>
							<div class="u-mr-5">
								<u-tag :text="item.type + item.requirements" type="info" mode="dark" size="mini"
									color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.type && item.requirements"></u-tag>
							</div>
							<div class="u-mr-5">
								<u-tag :text="item.keyword.split(',')[0]" type="info" mode="dark" size="mini"
									color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.keyword"></u-tag>
							</div>
							<div class="u-mr-5">
								<u-tag :text="item.keyword.split(',')[1]" type="info" mode="dark" size="mini"
									color="#eb5468" bgColor="#fff3f3" borderColor="#fff3f3" v-if="item.keyword && item.keyword.split(',').length>1"></u-tag>
							</div>
						</div>
						<div class="u-pt-10" style="display: flex;justify-content: space-between;">
							<div class="u-flex">
								<u-avatar :src="item.avatar=='男'?BoyAvatar:GirlAvatar" size="20"></u-avatar>
								<div class="u-pl-5">{{item.leader?item.leader:''}}</div>
								<div class="u-pl-5">{{item.posts?item.posts:''}}</div>
							</div>
							<div class="u-cl-content u-fz-12">
								{{item.area?item.area:''}}
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="u-pt-10 u-pb-10" v-if="current == 2">
			<div v-for="(item,index) in MarketingList" :key="index">
				<div :class="index==0?'':'u-mt-10'" style="background-color: #fffdfe;width: 95%;margin: 0 auto;border-radius: 10rpx;">
					<div @click="toMarketDetails(item)">
						<div style="padding: 30rpx 30rpx 5rpx 30rpx;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
							<span class="goods-title-tag" v-if="item.taskKeyword && item.taskType!='评测需求'">{{item.taskKeyword}}</span>
							<span style="color: #000000;font-size: 34rpx;font-weight: bold;height: 50rpx;line-height: 50rpx;">
								{{item.taskName?item.taskName:''}}
							</span>
						</div>
						<div class="u-flex u-col-center" style="padding: 5rpx 30rpx;">
							<div style="color: #f94d4d;font-size: 44rpx;font-weight: bold;margin: 0 10rpx 10rpx 0;">&yen;{{item.taskPrice?item.taskPrice:0}}</div>
							<div class="u-mr-5"><u-tag :text="item.taskLabel" mode="plain" size="mini" :color="item.taskColor" :borderColor="item.taskColor" bgColor="#ffffff" /></div>
							<div v-if="item.couponLabel"><u-tag :text="item.couponLabel" mode="plain" size="mini" color="#e66142" bgColor="#faede4" borderColor="#faede4" /></div>
						</div>
						<div class="u-flex" style="padding: 0 20rpx;">
							<div style="padding: 0 5rpx;" v-for="(titem,tindex) in getSplitImage(item.imageUrl)" :key="tindex">
								<u-image width="220rpx" height="220rpx" :src="titem" border-radius="10"></u-image>
							</div>
						</div>
					</div>
					<div style="padding: 20rpx 30rpx;color: #bcbcbc;">
						{{item.createTime}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: ['热卖', '工作', '活动'],
			current: 0,
			pageNum0: 1,
			pageSize0: 10,
			GoodSalesList: [],
			pageNum1: 1,
			pageSize1: 10,
			JobList: [],
			pageNum2: 1,
			pageSize2: 10,
			MarketingList: [],
			ServiceAds: ['https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/MeilyAdmin/60b21f9118450a8aaa50b44b3e9b6661.jpg']
		};
	},
	onLoad(options) {
		//判空
		if (!uni.$u.test.isEmpty(options.current)) {
			this.current = options.current;
		}
		this.getGoodSalesList();
		this.getJobList();
		this.getMarketingList();
	},
	onReachBottom() {
		if (this.current == 0) {
			this.pageNum0++;
			this.getGoodSalesList();
		} else if (this.current == 1) {
			this.pageNum1++;
			this.getJobList();
		} else if (this.current == 2) {
			this.pageNum2++;
			this.getMarketingList();
		}
	},
	onPullDownRefresh() {
		if (this.current == 0) {
			this.pageNum0 = 1;
			this.getGoodSalesList();
		} else if (this.current == 1) {
			this.pageNum1 = 1;
			this.getJobList();
		} else if (this.current == 2) {
			this.pageNum2 = 1;
			this.getMarketingList();
		}
	},
	methods: {

		// 切换tab
		sectionChange(index) {
			this.current = index;
		},

		//获取热卖数据
		async getGoodSalesList() {
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/goods/shelf/list",
				pageNum: this.pageNum0,
				pageSize: this.pageSize0,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if (result.code == 200) {
				if (this.pageNum0 != 1) {
					this.GoodSalesList = this.GoodSalesList.concat(result.rows);
				} else {
					this.GoodSalesList = result.rows;
				}
			}
		},

		//获取工作数据
		async getJobList() {
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/job/applet/list",
				searchStr: this.searchStr1,
				status: "招聘中",
				pageNum: this.pageNum1,
				pageSize: this.pageSize1,
				requirements: this.requirements,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if (result.code == 200) {
				let jobListTemp = result.rows.map(item => {
					if (this.isNotNull(item.area)){
						item.area = item.area.replace("-"," ")
					}
					return item;
				})
				if (this.pageNum1 != 1) {
					this.JobList = this.JobList.concat(jobListTemp)
				} else {
					this.JobList = jobListTemp
				}
			}
		},

		//获取活动数据
		async getMarketingList() {
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/hall/list",
				collectType: 'market',
				pageNum: this.pageNum2,
				pageSize: this.pageSize2,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if (result.code == 200) {
				if (this.pageNum2 != 1) {
					this.MarketingList = this.MarketingList.concat(result.rows)
				} else {
					this.MarketingList = result.rows
				}
			}
		},

		// 根据图片地址获取前三张图片放到数组中返回
		getSplitImage(imageUrl) {
			let imageList = imageUrl.split(',');
			let imageList2 = [];
			for (let i = 0; i < imageList.length; i++) {
				if (i < 3) {
					imageList2.push(imageList[i]);
				}
			}
			return imageList2;
		},

		/**
		* 判断招聘是否在一周内（标签显示为新）
		*/
		isNewOS(item) {
			let now = new Date()//获取当前时间戳
			let createTime = new Date(item.createTime.replace(/-/g,"/"))//距离的时间
			let index = (now - createTime)/1000/(60*60*24)
			let day = parseInt(index)//天
			if(day < 8){
				return true
			}
			return false
		},

		/**
		 * 跳转到商品详情
		 */
		async toGoodsDetails(item) {
			// 跳转到销售机会页面
			uni.$u.route('/pages_tabbar_contact/GoodsDetails', {
				goodsNo: item.goodsNo,
				goodsId: item.goodsId
			});
		},

		/**
		 * 跳转到工作详情
		 */	
		async toJobDetails(item) {
			uni.$u.route('/pages_tabbar_contact/JobDetails', {
				jobId: item.jobId
			});
		},

		/**
		 * 跳转到活动详情
		 */
		async toMarketDetails(item) {
			if(item.taskType == '评测需求') {
				uni.$u.route('/pages_tabbar_contact/EvaluationDetails', {
					docUnid: item.taskCurrentId
				});
			}else if(item.taskType == '样品发放') {
				uni.$u.route('/pages_tabbar_contact/SamplesDetails', {
					docUnid: item.taskCurrentId
				});
			}
		},
		
	},
};
</script>

<style lang="scss" scoped>
.u-page {
  background-color: #f5f5f5;
}

.aui-list-item {
  width: 47%;
  float: left;
  margin: 0 0 2% 2%;
  display: block;
  overflow: hidden;
  background-color: #fffdfe;
  /* box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb; */
  border-radius: 10rpx;
}

.aui-list-theme-img {
  height: auto;
  width: 100%;
  position: relative;
}

.aui-list-theme-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-list-theme-message {
  background: #ffffff;
  padding: 10rpx 10rpx;
}

.aui-list-theme-title {
  color: #4a4a4a;
  font-size: 30rpx;
  line-height: 38rpx;
  margin-top: 5rpx;
}

.aui-list-theme-message p {
  /*color: #ff3b52;*/
  font-size: 24rpx;
  font-weight: bold;
}

.aui-list-theme-message span.line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
  text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
}

.aui-list-theme-message p i {
  font-style: normal;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  color: #ff3b52;
  float: right;
  width: 25px;
  height: 25px;
}

.aui-list-theme-message p em {
  font-style: normal;
  font-size: 0.7rem;
  color: #ff3b52;
  text-decoration: line-through;
  font-weight: normal;
}

/* 两行或多行显示... */
.line-ellipsis {
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.goods-title-tag {
  padding: 0rpx 5rpx;
  color: #ffffff;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.goods-label-text {
  color: #ba8e41;
  font-size: 22rpx;
  font-weight: 300;
  padding-left: 3rpx;
}

.amount-money {
  color: #ea4d5e;
  font-size: 22rpx;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
  line-height: 50rpx;
}

.services-li {
	width: 95%;
	margin: 0 auto;
	background-color: #fffdfe;
	padding: 30rpx 20rpx;
	/* margin-top: 20rpx; */
	border-radius: 10rpx;
	/* box-shadow: 2rpx 6rpx 20rpx #efebeb;
	border-bottom: 2rpx solid #efebeb;
	border-right: 2rpx solid #efebeb; */
}

.os-job-name {
	font-size: 32rpx;
}

.os-salary {
	color: #ea4d5e;
	font-size: 32rpx;
}

.hot-tag {
	padding: 0rpx 6rpx;
	background-color: #ffa800;
	color: #ffffff;
	border-radius: 5rpx;
	font-size: 26rpx;
	font-weight: 440;
	height: 36rpx;
	line-height: 36rpx;
	margin-right: 10rpx;
}

.new-tag {
	padding: 0rpx 6rpx;
	background-color: #ea4d5e;
	color: #ffffff;
	border-radius: 5rpx;
	font-size: 26rpx;
	font-weight: 440;
	height: 36rpx;
	line-height: 32rpx;
	margin-right: 10rpx;
}

.goods-title-tag {
	color: #ffffff;
	background-color: #40972f;
	border-radius: 6rpx;
	font-size: 26rpx;
	margin-right: 3rpx;
	font-weight: 350;
	padding: 2rpx 10rpx;
	margin-right: 5rpx;
}

</style>
